<div class="inspector-container" style="height:100%">
	<div ng-include=" 'error' "></div>
	<div ng-include=" 'warning' "></div>
	<div ng-include=" 'info' "></div>
	<div ng-include=" 'loading' "></div>
	<div class="slider">
		<div class="slider-command">
			<div class="btn-group" style="margin-right:22px">
				<button type="button" class="btn btn-default btn-success btn-sm" ng-click="movePrev()"><span class="glyphicon glyphicon-backward"></span></button>
				<button type="button" class="btn btn-default btn-success btn-sm" ng-click="moveNext()"><span class="glyphicon glyphicon-forward"></span></button>
				<button type="button" class="btn btn-default btn-success btn-sm" ng-click="moveHead()"><span class="glyphicon glyphicon-fast-forward"></span></button>
			</div>
			<div class="btn-group" style="margin-right:4px;">
				<button type="button" class="btn btn-default btn-success btn-sm" ng-click="zoomInTimeSlider()"><span class="glyphicon glyphicon-plus"></span></button>
				<button type="button" class="btn btn-default btn-success btn-sm" ng-click="zoomOutTimeSlider()"><span class="glyphicon glyphicon-minus"></span></button>
			</div>

			<div class="input-group input-group-sm" style="width:189px;margin-right:4px;">
				 <span class="input-group-btn">
					 <button class="btn btn-default btn-success"><span class="current-point"></span></button>
				 </span>
				 <input type="text" class="form-control" value="{{targetPicker}}">
			</div>
		</div>
		<span>Timeline</span>
		<svg id="timeSlider-for-agent-info" class="timeSlider" width="100%" height="90px" style="margin-top:6px"></svg>
	</div>
	<div class="panel panel-info" ng-show="showEventInfo">
		<div class="panel-heading">
			<h3 class="panel-title">Event - {{eventInfo.length}}<span class="glyphicon glyphicon-remove" style="float:right;cursor:pointer" aria-hidden="true" ng-click="hideEventInfo()"></span></h3>
		</div>
		<div class="panel-body">
			<table class="table table-condensed" style="font-size:12px;margin-bottom:0px;">
				<colgroup>
					<col class="col-md-3">
					<col class="col-md-3">
					<col class="col-md-6">
				</colgroup>
				<thead>
					<th>Time</th>
					<th>Description</th>
					<th>Message</th>
				</thead>
				<tbody>
					<tr ng-repeat="event in eventInfo">
						<td>{{formatDate(event.eventTimestamp)}}</td>
						<td>{{event.eventTypeDesc}}</td>
						<td ng-bind-html="replaceNewLineToBR(event.eventMessage)"></td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<div>
		<div class="row">
			<div class="col-md-12">
				<table class="table table-condensed" style="font-size:12px;margin-bottom:0px">
					<tbody>
					<tr>
						<td colspan="4"><h4>Information</h4></td>
					</tr>
					<tr>
						<td class="col-md-2 text-right"><strong>Application Name</strong></td>
						<td class="col-md-4 text-left" ng-show="isSameApplication()">{{agent.applicationName}}</td>
						<td class="col-md-4 text-left" ng-hide="isSameApplication()"><span style="color:red">{{agent.applicationName}}</span> <button type="button" class="btn btn-xs btn-danger _wrongApp" ng-click="toggleHelp(this)" style="font-size:10px;float:right" data-toggle="popover" data-container="body" data-trigger="manual"  data-placement="bottom"><span class="glyphicon glyphicon-exclamation-sign"></span></button></td>
						<td class="col-md-2 text-right"><strong>Agent Version</strong></td>
						<td class="col-md-4 text-left">{{agent.agentVersion}}</td>
					</tr>
					<tr>
						<td class="text-right"><strong>Agent Id</strong></td>
						<td class="text-left">{{agent.agentId}}</td>
						<td class="text-right"><strong>PID</strong></td>
						<td class="text-left">{{agent.pid}}</td>
					</tr>
					<tr>
						<td class="text-right"><strong>Hostname</strong></td>
						<td class="text-left">{{agent.hostName}}&nbsp;
							<ul ng-if="agent.linkList" style="padding:0px;margin:0px;display:inline;">
								<li ng-repeat="link in agent.linkList" style="list-style:none;padding:0px;margin:0px;display:inline;padding-left:4px;">
									<a ng-if="link.linkType == 'aTag'" class="btn btn-default btn-xs" href="{{link.linkURL}}" target="_blank">{{link.linkName}}</a>
								</li>
							</ul>
							<a ng-if="agent.linkName" class="btn btn-default btn-xs" href="{{agent.linkURL}}" target="_blank" title="System resource monitoring site">{{agent.linkName}}</a>
						</td>
						<td class="text-right"><strong>JVM&nbsp;(GC Type)</strong></td>
						<td class="text-left" ng-if="agent.vmVersion">{{agent.vmVersion}}&nbsp;({{agent.jvmInfo.gcTypeName || agent.jvmGcType}})</td>
						<td class="text-left" ng-if="!agent.vmVersion">{{agent.jvmGcType}}</td>
					</tr>
					<tr>
						<td class="text-right"><strong>IP</strong></td>
						<td class="text-left">
							<div>{{agent.ip}}</div>
						</td>
						<td class="text-right"><strong>Start Time</strong></td>
						<td class="text-left">{{formatDate( agent.startTimestamp )}}</td>
					</tr>
					<tr>
						<td class="text-right"><strong>Service Type</strong></td>
						<td class="text-left">
							{{agent.serviceType}}
							<span ng-show="agent.serverMetaData">
								<span ng-show="agent.serverMetaData.serverInfo.length">&nbsp;({{agent.serverMetaData.serverInfo}})&nbsp;</span>
								<button type="button" class="btn btn-default btn-xs" ng-click="toggleShowDetail($event)" ng-show="agent.serverMetaData.vmArgs.length || agent.serverMetaData.serviceInfos.length">Detail</button>
							</span>
						</td>
						<td class="text-right"><strong>End Status</strong></td>
						<td class="text-left">{{agent.status.state.desc}} (last checked : {{formatDate( agent.status.eventTimestamp )}})</td>
					</tr>
					</tbody>
				</table>
			</div>
		</div>
		<div ng-show="showDetail" style="margin-top:4px;">
			<div class="detailIndicator" style="position:relative;width:0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #BBB5B5;"></div>
			<div class="row">
				<div class="col-md-12">
					<table class="table table-condensed table-bordered" style="font-size:12px;margin-bottom:20px;">
						<tbody>
						<tr class="active">
							<td class="col-md-2 text-right"><strong>Server Info</strong></td>
							<td class="col-md-10 text-left">
								<span ng-show="agent.serverMetaData.serverInfo.length">{{agent.serverMetaData.serverInfo}}</span>
								<span ng-hide="agent.serverMetaData.serverInfo.length">N/A</span>
							</td>
						</tr>
						<tr style="background-color:#FFF;">
							<td class="text-right"><strong>JVM Arguments</strong></td>
							<td class="text-left">
								<div style="overflow:auto;max-height:200px;" ng-show="agent.serverMetaData.vmArgs.length">
									<ul class="list-unstyled">
										<li ng-repeat="vmArg in agent.serverMetaData.vmArgs track by $index">{{vmArg}}</li>
									</ul>
								</div>
								<span ng-hide="agent.serverMetaData.vmArgs.length">N/A</span>
							</td>
						</tr>
						<tr class="active">
							<td class="text-right"><strong>Services</strong></td>
							<td class="text-left">
								<div class="row" ng-show="agent.serverMetaData.serviceInfos.length">
									<div class="col-md-4 service-list">
										<div class="list-group">
											<a href="" class="list-group-item clearfix" ng-class="{active: currentServiceInfo == serviceInfo, disabled: serviceInfo.serviceLibs.length == 0}"
											   ng-repeat="serviceInfo in agent.serverMetaData.serviceInfos" style="padding:4px 10px" ng-click="selectServiceInfo(serviceInfo)">
												{{serviceInfo.serviceName}}
												<span class="pull-right" ng-show="serviceInfo.serviceLibs.length > 0">&gt;</span>
											</a>
										</div>
									</div>
									<div class="service-libs" style="overflow:auto;max-height:140px;margin-right:20px">
										<ul class="list-unstyled">
											<li ng-repeat="serviceLib in currentServiceInfo.serviceLibs track by $index" style="{{hasDuplicate(serviceLib, $index)}}">{{serviceLib}}</li>
										</ul>
									</div>
								</div>
								<span ng-hide="agent.serverMetaData.serviceInfos.length">N/A</span>
							</td>
						</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	<div class="chart-collection">
		<div class="row">
			<div class="col-md-6">
				<h4><span class="glyphicon glyphicon-question-sign heapTooltip" style="cursor:pointer;float:right;"></span> Heap Usage</h4>
				<agent-inspector-chart-directive namespace="agent-heap"></agent-inspector-chart-directive>
			</div>
			<div class="col-md-6">
				<h4><span class="glyphicon glyphicon-question-sign permGenTooltip" style="cursor:pointer;float:right;"></span> Non-Heap Usage</h4>
				<agent-inspector-chart-directive namespace="agent-non-heap"></agent-inspector-chart-directive>
			</div>
		</div>
		<hr>
		<div class="row">
			<div class="col-md-6">
				<h4><span class="glyphicon glyphicon-question-sign cpuUsageTooltip" style="cursor:pointer;float:right;"></span> JVM/System Cpu Usage</h4>
				<agent-inspector-chart-directive namespace="agent-cpu-load"></agent-inspector-chart-directive>
			</div>
			<div class="col-md-6">
				<h4><span class="glyphicon glyphicon-question-sign tpsTooltip" style="cursor:pointer;float:right;"></span> Transactions Per Second</h4>
				<agent-inspector-chart-directive namespace="agent-tps"></agent-inspector-chart-directive>
			</div>
		</div>
		<hr>
		<div class="row">
			<div class="col-md-6">
				<h4><span class="glyphicon glyphicon-question-sign activeThreadTooltip" style="cursor:pointer;float:right;"></span> Active Thread</h4>
				<agent-inspector-chart-directive namespace="agent-active-thread"></agent-inspector-chart-directive>
			</div>
			<div class="col-md-6">
				<h4><span class="glyphicon glyphicon-question-sign responseTimeTooltip" style="cursor:pointer;float:right;"></span> Response Time</h4>
				<agent-inspector-chart-directive namespace="agent-response-time"></agent-inspector-chart-directive>
			</div>
		</div>
		<hr>
		<div class="row">
			<div class="col-md-6">
				<h4><span class="glyphicon glyphicon-question-sign directBufferCountTooltip" style="cursor:pointer;float:right;"></span> Direct Buffer Count</h4>
				<agent-inspector-chart-directive namespace="agent-direct-buffer-count"></agent-inspector-chart-directive>
			</div>
			<div class="col-md-6">
				<h4><span class="glyphicon glyphicon-question-sign directBufferMemoryTooltip" style="cursor:pointer;float:right;"></span> Direct Buffer Memory</h4>
				<agent-inspector-chart-directive namespace="agent-direct-buffer-memory"></agent-inspector-chart-directive>
			</div>
		</div>
		<hr>
		<div class="row">
			<div class="col-md-6">
				<h4><span class="glyphicon glyphicon-question-sign mappedBufferCountTooltip" style="cursor:pointer;float:right;"></span> Mapped Buffer Count</h4>
				<agent-inspector-chart-directive namespace="agent-mapped-buffer-count"></agent-inspector-chart-directive>
			</div>
			<div class="col-md-6">
				<h4><span class="glyphicon glyphicon-question-sign mappedBufferMemoryTooltip" style="cursor:pointer;float:right;"></span> Mapped Buffer Memory</h4>
				<agent-inspector-chart-directive namespace="agent-mapped-buffer-memory"></agent-inspector-chart-directive>
			</div>
		</div>
		<hr>
		<div class="row">
			<div class="col-md-6" id="data-source-chart">
				<h4>
					<span class="glyphicon glyphicon-question-sign dataSourceTooltip" style="cursor:pointer;float:right;"></span> Data Source
					<span class="type-selector" ng-show="hasDataSource()" ng-click="toggleSourceSelectLayer()">Select Source <span class="glyphicon glyphicon-chevron-down"></span></span>
					<div class="type-select-layer" ng-click="changeDataSource($event)">
						<div>
							<button class="btn btn-default btn-xs" ng-click="selectAllDataSource()">ALL</button>
						</div>
						<div class="wrapper">
							<ul>
								<li ng-repeat="key in dataSourceChartKeys">
									<input type="checkbox" id="checkbox_{{key.value}}" value="{{key.value}}" ng-checked="checkChecked(key.value)"><label for="checkbox_{{key.value}}">{{key.display}}</label>
								</li>
							</ul>
						</div>
					</div>
				</h4>
				<ds-chart-directive namespace="agent-data-source"></ds-chart-directive>
				<br/>
				<div class="panel panel-success" ng-show="hasDataSource()">
					<div class="panel-heading">Data Source Info</div>
					<div class="panel-body">
						<table class="table table-bordered">
							<tbody>
							<tr>
								<td>Active Avg</td>
								<td>Active Max</td>
								<td>Total Max</td>
							</tr>
							<tr>
								<td class="ds-active-avg">-</td>
								<td class="ds-active-max">-</td>
								<td class="ds-total-max">-</td>
							</tr>
							<tr>
								<td>ID</td>
								<td>Type</td>
								<td>Database Name</td>
							</tr>
							<tr>
								<td class="ds-id">-</td>
								<td class="ds-type">-</td>
								<td class="ds-database-name">-</td>
							</tr>
							<tr>
								<td colspan="3">Jdbc URL</td>
							</tr>
							<tr>
								<td colspan="3" class="ds-jdbc-url" style="word-break: break-all;">-</td>
							</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
			<div class="col-md-6">
				<h4><span class="glyphicon glyphicon-question-sign openFileDescriptorTooltip" style="cursor:pointer;float:right;"></span> Open File Descriptor</h4>
				<agent-inspector-chart-directive namespace="agent-open-file-descriptor"></agent-inspector-chart-directive>
			</div>
		</div>
	</div>
</div>